<script setup lang="ts">

import {Badge} from "@/components/ui/badge";

const recentActivities = [
  {
    title: "New user registration",
    description: "John Doe just signed up",
    time: "2 minutes ago",
    type: "user",
  },
  {
    title: "Order completed",
    description: "Order #1234 has been completed",
    time: "5 minutes ago",
    type: "order",
  },
  {
    title: "Product updated",
    description: "iPhone 15 Pro details updated",
    time: "10 minutes ago",
    type: "product",
  },
  {
    title: "Payment received",
    description: "$299.00 payment received",
    time: "15 minutes ago",
    type: "payment",
  },
];

</script>

<template>
  <div class="space-y-4">
    <div :key="index"
         v-for="(activity, index) in recentActivities"
         class="flex items-start space-x-3">
      <div class="w-2 h-2 bg-blue-500 rounded-full mt-2"/>
      <div class="flex-1 space-y-1">
        <p class="text-sm font-medium leading-none">
          {{ activity.title }}
        </p>
        <p class="text-sm text-muted-foreground">
          {{ activity.description }}
        </p>
        <p class="text-xs text-muted-foreground">
          {{ activity.time }}
        </p>
      </div>
      <Badge variant="outline" class="text-xs">
        {{ activity.type }}
      </Badge>
    </div>
  </div>
</template>

<style scoped>

</style>
